<template>
  <div>
    <p>文章管理</p>
    <ul v-for="(item, index) in list" :key="index">
      <p>{{ item.title }}</p>
      <input type="checkbox" :checked="item.status" />
      <p>{{ item.content }}</p>

      <button @click="Del(item, i)">删除</button>
      <button>编辑</button>
    </ul>
    <!-- {{ list }} -->
  </div>
</template>
<script setup>
import http from "@/utils/http";
import { ref } from "vue";
loadList();

let list = ref([]);
function loadList() {
  http
    .request({
      url: "/posts",
    })
    .then((r) => {
      console.log(r);
      console.log(r.data);
      list.value = r.data;
    });
}
function Del(item, i) {
  console.log(item);
  http
    .request({
      url: "/posts/" + item.id,
      method: "delete",
    })
    .then((r) => {
      console.log(r.data);
    });
  loadList();
}
</script>
<style scoped></style>
